<template>

  <div>

    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="bysQuery.xm" placeholder="学生姓名"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="bysQuery.xh" placeholder="学号"/>
      </el-form-item>

      <el-form-item>
        <el-select v-model="bysQuery.xy" clearable placeholder="学院" @change = "getbj(bysQuery.xy)">
          <el-option
            v-for = "(xym,index) in xyList" :key="index" :label="xym" :value="xym" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="bysQuery.bh" clearable placeholder="班级">
              <el-option
            v-for = "(bj,index) in bjList" :key="index" :label="bj" :value="bj" />
        </el-select>
      </el-form-item>


      <el-button type="primary" icon="el-icon-search" @click="gettsbysListByCondition()">查询</el-button>
      <el-button type="default" @click="clear()">清空</el-button>
      <el-button type="primary" @click="exportExcel()">导出</el-button>
      <el-button type="danger" @click="showNewDialog()" :disabled="!isOpTime&&role!='admin'">新增</el-button>
    </el-form>


 <!--模板下载与导入-->
    <el-form label-width="90px">
      <el-row>

        <el-col :span="5" style="width:300px">
          <el-form-item label="信息描述">
            <el-tag type="info">excel模版说明</el-tag>
            <el-tag>
              <i class="el-icon-download" />
              <a :href="'/static/tsbys.xlsx'">点击下载模版</a>
            </el-tag>
          </el-form-item>
        </el-col>

      <el-col :span="5" style="width:300px">
      <el-form-item>
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled&&!isOpTime&&role!='admin'"
          :limit="1"
          :action="BASE_API+'/excel/importtsbys'"
          name="file"
          accept=".xlsx">
          <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="medium"
            type="success"
            @click="submitUpload" :disabled="!isOpTime&&role!='admin'">导入</el-button>
        </el-upload>
      </el-form-item>
    </el-col>


        <el-col :span="7.5">
          <el-form-item label="操作时间">
            <el-tag style="background-color:antiquewhite">
              <span style="color:black; font-size:14px">开始时间</span> <span
                style="color:black; font-size:16px"><b>{{startTime}}</b></span>
            </el-tag>
            <el-tag style="background-color:antiquewhite">
              <span style="color:black; font-size:14px">结束时间</span> <span
                style="color:black; font-size:16px"><b>{{endTime}}</b></span>
            </el-tag>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="当前状态">
            <el-tag v-if="isOpTime&&role!='admin'" style="background-color: #67c23a;"><span
                style="font-size:18px; color: white;">可操作</span></el-tag>
            <el-tag v-if="!isOpTime&&role!='admin'" style="background-color: #f56c6c;">
              <span v-if="!isOpTime&&role!='admin'" style="font-size:18px; color: white;"><b>不可操作（不在操作时间内）</b></span>
            </el-tag>
            <el-tag v-if="role=='admin'" style="background-color: #67c23a;"><span
                style="font-size:18px; color: white;">可操作【管理员】</span></el-tag>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>


  <!--数据列表-->
    <el-table
    :data="xssjList"
    border
    style="width: 100%">


    <el-table-column
      prop="xh"
      label="学号"
      width="130">
    </el-table-column>

    <el-table-column
       prop="xm"
      label="姓名"
      width="80">
    </el-table-column>

    <el-table-column
      prop="xy"
      label="学院">
    </el-table-column>

      <el-table-column
      prop="bh"
      label="班级">
    </el-table-column>

      <el-table-column
      prop="yy"
      label="处罚原因">
    </el-table-column>

      <el-table-column
      prop="cfsj"
      label="处罚时间">
    </el-table-column>

      <el-table-column
      prop="sqly"
      label="申请理由">
    </el-table-column>

    <el-table-column
      prop="fhtk"
      label="条款">
    </el-table-column>

    <el-table-column
      prop="shfs"
      label="审核方式">
    </el-table-column>

    <el-table-column
      prop="shjg"
      label="审核结果"
      width="60">
    </el-table-column>

     <el-table-column
      prop="zccl"
      label="已上传材料"
      width="150">
    </el-table-column>

    //附件上传TO-DO
    <el-table-column
      label="附件上传"
      width="150">
<template slot-scope="scope">
  <el-form>
      <el-form-item v-if="scope.row.zccl!=null">
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="BASE_API+'/h/byszccl/downloadFile/'+(scope.row.id)">下载已上传资料</a>
        </el-tag>
      </el-form-item>
    <el-form-item>

      <el-upload
        class="uploadcl"
        ref="uploadcl"
        :action="BASE_API+'/h/byszccl/uploadFile/'+(scope.row.id)+'/F102'"
        :on-preview="handlePreviewFile"
        :on-remove="handleRemoveFile"
        :on-success="UploadclSuccess"
        :on-error="UploadclError"
        :limit="1"
        name="file"
        accept=".jpg, .jpeg, .png, .gif, .pdf , .xlsx"
        :auto-upload="true">
        <el-button slot="trigger" size="small" type="primary">选取文件自动上传</el-button>

      </el-upload>

    </el-form-item>
  </el-form>

  </template>
</el-table-column>


    <el-table-column
      prop="address"
      label="操作"
      width="200">
    <template slot-scope="scope">
        <el-button type = "primary" size="mini" icon="el-icon-edit" @click ="showDialogAndDate(scope.row.id)" :disabled="!isOpTime&&role!='admin'">修改</el-button>
        <el-button type = "danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)" :disabled="(!isOpTime||department!='校级')&&role!='admin'">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <el-pagination
  background
  layout="prev, pager, next ,jumper, total"
  :current-page="page"
  :page-size="limit"
  :total="total"
  style="padding: 30px 0; text-align: center"
  @current-change = "gettsbysListByCondition"
  >
 </el-pagination>

<!--新增弹窗-->
    <el-dialog :visible.sync="SavedialogFormVisible" title="新增数据">
      <el-form :model="savetsbys" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="savetsbys.xm" />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="savetsbys.xh" />
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="savetsbys.xy" />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="savetsbys.bh" />
        </el-form-item>
        <el-form-item label="处罚原因">
          <el-input v-model="savetsbys.yy" />
        </el-form-item>
        <el-form-item label="处罚时间">
          <el-input v-model="savetsbys.cfsj" />
        </el-form-item>
        <el-form-item label="申请理由">
          <el-input v-model="savetsbys.sqly" />
        </el-form-item>
        <el-form-item label="条款">
          <el-input v-model="savetsbys.fhtk" />
        </el-form-item>
        <el-form-item label="审核方式">
          <el-input v-model="savetsbys.shfs" />
        </el-form-item>
        <el-form-item label="审核结果">
          <el-input v-model="savetsbys.shjg" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="SavedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>



    <!--修改弹窗-->
    <el-dialog :visible.sync="dialogFormVisible" title="修改数据">
      <el-form :model="updatetsbys" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="updatetsbys.xm" readonly='true' />
        </el-form-item>
        <el-form-item label="学号">
          <el-input v-model="updatetsbys.xh" readonly='true' />
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="updatetsbys.xy" readonly='true' />
        </el-form-item>
        <el-form-item label="班级">
          <el-input v-model="updatetsbys.bh" readonly='true' />
        </el-form-item>
        <el-form-item label="处罚原因">
          <el-input v-model="updatetsbys.yy" />
        </el-form-item>
        <el-form-item label="处罚时间">
          <el-input v-model="updatetsbys.cfsj" />
        </el-form-item>
        <el-form-item label="申请理由">
          <el-input v-model="updatetsbys.sqly" />
        </el-form-item>
        <el-form-item label="条款">
          <el-input v-model="updatetsbys.fhtk" />
        </el-form-item>
        <el-form-item label="审核方式">
          <el-input v-model="updatetsbys.shfs" />
        </el-form-item>
        <el-form-item label="审核结果">
          <el-input v-model="updatetsbys.shjg" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
import tsbysapi from '@/api/tsbys.js'
import fileDownload from 'js-file-download'
import bjapi from '@/api/bjxx.js'
import authapi from '@/api/Sauth.js'

  export default {
    data() {
      return {
        xyList: {},
        bjList: {},
        xssjList: null,
        page: 1,
        limit: 20,
        total: 0,
        bysQuery: {},
        exportQuery: {},
        BASE_API: process.env.BASE_API, // 接口API地址
        loading: false,
        importBtnDisabled: false, // 按钮是否禁用
        updateList: {},
        dialogFormVisible: false,
        updatetsbys: {},//修改按钮数据
        savetsbys: {},//新增按钮数据
        dialogFormVisible: false,//弹窗
        SavedialogFormVisible: false,//弹窗
        role: {},//角色admin/user
        department: {},//部门
        isOpTime: {},//是否在可操作时间
        Fname: 'F103',//功能所属编号
        startTime: {},
        endTime: {},
      }
    },

    created(){
      this.getAlltsbysList()
      this.getxy()
      this.getAuth()
      this.getOpTime()
      this.getDept()
    },

    methods:{

       //附件上传TO-DO
      submitUploadFile() {
        this.$refs.uploadcl.submit();
      },
      handleRemoveFile(file, fileList) {
        console.log(file, fileList);
      },
      handlePreviewFile(file) {
        console.log(file);
      },
      UploadclSuccess(response){
        if (response.success === true) {
        this.fileUploadBtnText = '导入成功'
        this.loading = false
        this.$message({
        type: 'success',
          message: response.message
       })
       setTimeout("location.reload()", 1500 )

        }
      },

      UploadclError(){
        this.fileUploadBtnText = '导入失败'
        this.loading = false
        this.$message({
        type: 'error',
          message: '导入失败'
          })
      },



    //权限获取
    getAuth() {
      authapi.getRole().then(response => {
        this.role = response.data.role
      })
    },

    //院校级检查
    getDept() {
      authapi.getDept().then(response => {
        this.department = response.data.department
      })
    },

    //是否在可操作时间
    getOpTime() {
      authapi.getOpTime(this.Fname).then(response => {
        this.isOpTime = response.data.isTime
        this.startTime = response.data.startTime
        this.endTime = response.data.endTime
      })
    },

    //新增一条按钮
    save() {
      tsbysapi.save(this.savetsbys).then(response => {
        this.$message({
          type: 'success',
          message: '新增成功!'
        })
        this.SavedialogFormVisible = false
        this.gettsbysListByCondition()
      })
    },

    //显示新增弹窗
    showNewDialog() {
      this.SavedialogFormVisible = true
    },

    //修改按钮
    update() {
      tsbysapi.updatetsbysById(this.updatetsbys).then(response => {
        this.$message({
          type: 'success',
          message: '修改成功!'
        })
        this.dialogFormVisible = false
      })
    },

    //显示修改弹窗
    showDialogAndDate(id) {
      tsbysapi.gettsbysById(id).then(response => {
        this.updatetsbys = response.data.bys
      })

      this.dialogFormVisible = true
    },



     getxy(){
        bjapi.getXy().then(response=>{
          this.xyList = response.data.xylist
        })
      },

      getbj(xym){
        bjapi.getBjByXy(xym).then(response=>{
            this.bjList = response.data.bjList
        })
      },


      showDialogAndDate(id){
        tsbysapi.gettsbysById(id).then(response=>{
          this.updateList = response.data.bys
        })

        this.dialogFormVisible=true
      },

      fileUploadSuccess(response){
        if (response.success === true) {
        this.fileUploadBtnText = '导入成功'
        this.loading = false
        this.$message({
        type: 'success',
        message: response.message
      })
      setTimeout("location.reload()", 1500 )

    }
      },

      fileUploadError(){
        this.fileUploadBtnText = '导入失败'
        this.loading = false
        this.$message({
        type: 'error',
          message: '导入失败'
          })
      },

      submitUpload(){
          this.fileUploadBtnText = '正在上传'
          this.importBtnDisabled = true
          this.loading = true
          this.$refs.upload.submit()
      },



      clear(){
          this.bysQuery = {}
          this.getAlltsbysList()
      },

      exportExcel(){
        tsbysapi.exportdata(this.exportQuery).then((res)=>{
            fileDownload(res, '特殊毕业生信息表.xlsx')
          });
      },




      getAlltsbysList(page=1){
        this.page = page
        tsbysapi.gettsbyssj(this.page,this.limit).then(response=>{
          this.xssjList = response.data.list
          this.total = response.data.total
        })
      },

      gettsbysListByCondition(page=1){
         this.page = page
         tsbysapi.tsbyssjPageCondition(this.page,this.limit,this.bysQuery)
          .then(response=>{
              this.total = response.data.total
              this.xssjList = response.data.list

              //查询之后更新导出的数据为所查询数据
              this.exportQuery = this.bysQuery

              //清空查询条件
              this.bysQuery = {}
          })
      },

      removeDataById(id) {
    // debugger
    // console.log(memberId)
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        return tsbysapi.removeById(id)
    }).then(() => {
        this.gettsbysListByCondition()
        this.$message({
            type: 'success',
            message: '删除成功!'
        })
    }).catch((response) => { // 失败
        if (response === 'cancel') {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        } else {
            this.$message({
                type: 'error',
                message: '删除失败'
            })
        }
    })
},



    }


  }
</script>
